<template>
	<div class="auditer">
		<el-card shadow="never">
			<div class="v-card">
				<div class="left">
					<div class="search">
						<el-input
							placeholder="请输入内容"
							v-model="search.name"
							class="input-with-select"
							prefix-icon="el-icon-search"
							clearable
							@input="toSearch"
						></el-input>
						<el-select :clearable="false" v-model="search.type" @change="toSearch">
							<el-option label="成员" value="01"></el-option>
							<el-option label="部门" value="00"></el-option>
						</el-select>
					</div>
					<el-tabs value="1">
						<el-tab-pane label="请选择" name="1"></el-tab-pane>
					</el-tabs>
					<div class="auditer-breadcrumb">
						<div
							class="breadcrumb-item"
							v-for="(item, index) in breadcrumb"
							:key="index"
							@click="onChangeBreadcrumb(item, index)"
						>
							{{ item.name }}
						</div>
					</div>
					<div class="main">
						<div class="total">
							<el-checkbox
								:value="isCheckAll"
								:indeterminate="isIndeterminate"
								label="全选"
								@change="onTotalChange"
								v-if="multiple"
								:disabled="!list.length || (disDept && disUser)"
							></el-checkbox>
						</div>
						<div class="list">
							<template v-for="(item, index) in list">
								<div class="item" :key="index + '00'" v-if="item.type === '00'">
									<el-checkbox
										:disabled="disDept || isDisabled(item) || item.disabled"
										class="el-checkbox"
										:value="isChecked(item)"
										@change="onCheck(item)"
									>
										<img :src="logo" alt="" />
										<div class="name">
											{{ item.name }}
											<div class="dept-path" v-if="item.parents">
												{{ item.parents }}
											</div>
										</div>
									</el-checkbox>
									<el-button
										v-if="item.childFlag == '01'"
										class="el-button"
										type="text"
										icon="el-icon-bottom-right"
										@click="toNext(item)"
										:disabled="isChecked(item)"
									>
										下级
									</el-button>
								</div>
								<div class="item" :key="index + '01'" v-else>
									<el-checkbox
										class="el-checkbox"
										:disabled="disUser || isDisabled(item) || item.disabled"
										:value="isChecked(item)"
										@change="onCheck(item)"
									>
										<div class="avatar">{{ username(item) }}</div>
										<div class="name">
											{{ item.name }}
											<div class="dept-path" v-if="item.parents">
												{{ item.parents }}
											</div>
										</div>
									</el-checkbox>
								</div>
							</template>
						</div>
					</div>
				</div>
				<div class="right">
					<div class="amount">
						已选: {{ userLength }}名用户，{{ deptLength }}个部门
						<el-button type="primary" icon="el-icon-delete" size="mini" :disabled="!checkList.length" @click="clearAll">
							清空
						</el-button>
					</div>
					<div class="main">
						<br />
						<div class="list">
							<template v-for="(item, index) in checkList">
								<div class="item" :key="item.id + '00'" v-if="item.type === '00'">
									<img :src="logo" alt="" />
									<div class="name">
										{{ item.name }}
										<div class="dept-path" v-if="item.parents">
											{{ item.parents }}
										</div>
									</div>
									<el-button
										class="closeable"
										icon="el-icon-close"
										round
										type="text"
										@click="onDeleteCheck(item, index)"
									></el-button>
								</div>
								<div class="item" :key="item.id + '01'" v-else>
									<div class="avatar">{{ username(item) }}</div>
									<div class="name">
										{{ item.name }}
										<div class="dept-path" v-if="item.parents">
											{{ item.parents }}
										</div>
									</div>
									<el-button
										class="closeable"
										icon="el-icon-close"
										round
										type="text"
										@click="onDeleteCheck(item, index)"
									></el-button>
								</div>
							</template>
						</div>
					</div>
				</div>
			</div>
		</el-card>
	</div>
</template>

<script>
import request from "@/common/request"
import logo from "@/assets/dept-logo.svg"
let list = {}

export default {
	props: {
		visible: {
			type: Boolean,
		},
		value: {},
		disabled: {
			type: [Boolean, Function, Array],
		},
		disDept: {
			type: [Boolean],
			default: false,
		},
		disUser: {
			type: [Boolean],
			default: false,
		},
		multiple: {
			type: [Boolean],
			default: true,
		},
		authFlag: {
			type: String,
			default: "01",
		},
	},
	data() {
		return {
			logo,
			search: {
				type: "01",
				name: "",
			},
			breadcrumb: [
				{
					name: "全部",
					id: "",
				},
			],
			checkList: [],
			list: [],
		}
	},
	computed: {
		isCheckAll() {
			if (this.list.length === 0) return false
			if (this.checkList.length === 0) {
				return false
			}
			return this.list.every(item => {
				if (this.disDept && item.type === "00") return true
				if (this.disUser && item.type === "01") return true
				return this.isChecked(item)
			})
		},
		isIndeterminate() {
			return false
		},
		checkListIds() {
			return this.checkList.map(item => item.id)
		},
		deptLength() {
			return this.checkList.filter(item => item.type === "00").length
		},
		userLength() {
			return this.checkList.filter(item => item.type === "01").length
		},
	},
	created() {
		this.getDeptList()
	},
	methods: {
		isDisabled(item) {
			if (typeof this.disabled === "boolean") {
				return this.disabled
			}
			if (typeof this.disabled === "function") {
				return this.disabled(item)
			}
			if (Array.isArray(this.disabled)) {
				return this.disabled.includes(item.id)
			}
		},
		async getDeptList(id = "") {
			if (list[id]) {
				this.list = [].concat(list[id])
				return
			} else {
				const { code, data } = await request("get", "/system/sysDept/componentList", {
					id,
					authFlag: this.authFlag,
				})
				if (code == 0) {
					list[id] = data
					this.list = [].concat(data)
				}
			}
		},
		async toSearch() {
			if (this.search.name === "") {
				this.getDeptList()
				return
			}
			const { code, data } = await request("get", "/system/sysDept/searchForCom", {
				...this.search,
				authFlag: this.authFlag,
			})
			if (code == 0) {
				this.list = [].concat(data)
			}
		},

		onChangeBreadcrumb(breadcrumb, index) {
			this.breadcrumb = this.breadcrumb.slice(0, index + 1)
			this.getDeptList(breadcrumb.id)
		},
		toNext(item) {
			this.breadcrumb.push(item)
			this.getDeptList(item.id)
		},

		onCheck(item) {
			if (this.multiple) {
				if (this.isChecked(item)) {
					this.checkList = this.checkList.filter(list => list.id !== item.id)
				} else {
					this.checkList.push({
						...item,
						parents: this.breadcrumb
							.map((item, index) => (index ? item.name : false))
							.filter(item => item)
							.join("/"),
					})
				}
			} else {
				this.checkList = [
					{
						...item,
						parents: this.breadcrumb
							.map((item, index) => (index ? item.name : false))
							.filter(item => item)
							.join("/"),
					},
				]
			}
		},
		onDeleteCheck(item, index) {
			this.checkList.splice(index, 1)
		},
		clearAll() {
			this.checkList = []
		},
		onTotalChange(status) {
			const checkList = this.list
				.filter(item => {
					return !this.isChecked(item)
				})
				.filter(item => {
					if (this.disDept && this.disUser) return false
					if (this.disDept && item.type === "00") return false
					if (this.disUser && item.type === "01") return false
					return true
				})
			if (status) {
				this.checkList = this.checkList.concat(checkList)
			} else {
				this.checkList = this.checkList.filter(item => {
					return !this.list.some(check => check.id === item.id)
				})
			}
		},

		isChecked(item) {
			return this.checkListIds.includes(item.id)
		},
		username(item) {
			return item.name.substring(item.name.length - 2)
		},

		refresh() {
			// this.checkList = []
			this.search.type = "01"
			this.search.name = ""
			this.breadcrumb.length = 1
			this.getDeptList()
		},
	},
	watch: {},
}
</script>

<style lang="scss" scoped>
.auditer {
	.v-card {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		.left,
		.right {
			width: 50%;
		}
		.left {
			padding-right: 20px;
			border-right: 1px solid #ebeef5;
			.search {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.auditer-breadcrumb {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				white-space: nowrap;
				overflow-x: auto;
				.breadcrumb-item {
					cursor: pointer;
					user-select: none;
					display: inline-block;
					padding-right: 15px;
					position: relative;
					&::before {
						content: "/";
						position: absolute;
						top: 0;
						bottom: 0;
						right: 0;
						opacity: 0;
						padding-right: 0;
					}
					&:not(:last-child) {
						&::before {
							opacity: 1;
						}
					}
					&:hover,
					&:last-child {
						color: #3390ff;
					}
					&:hover {
						text-decoration: underline;
					}
				}
			}
		}
		.right {
			padding-left: 20px;
			.amount {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 14px;
			}
			.list {
				max-height: 57vh;
				.item {
					img,
					.avatar {
						flex: none;
					}
					.name {
						white-space: nowrap;
						width: 100%;
					}
				}
			}
		}
	}
	.main {
		.list {
			max-height: 50vh;
			overflow-y: auto;
			overflow-x: hidden;
			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				transition: background 0.3s;
				border-radius: 5px;
				padding: 0 10px;
				height: 40px;
				&:hover {
					background: #f5f5f5;
				}
				.el-checkbox {
					width: 100%;
					height: 100%;
					margin-bottom: 0;
				}
				.name {
					display: inline-block;
					padding-left: 5px;
					vertical-align: middle;
					.dept-path {
						font-size: 12px;
						color: #999;
					}
				}
				.avatar,
				.el-button {
					flex: none;
					vertical-align: middle;
				}
			}
			.avatar {
				width: 30px;
				height: 30px;
				overflow: hidden;
				display: inline-flex;
				justify-content: center;
				align-items: center;
				border-radius: 50%;
				color: #fff;
				background: #0cafcc;
				font-size: 12px;
			}
		}
	}
}
</style>
